<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">已背单词</span>
    </van-col>
  </van-row>
  <div class="word-container">
    <h1>{{ currentWord.word }}</h1>
    <p><strong>中文:</strong> {{ currentWord.chinese}}</p>
    <p><strong>例句 :</strong> {{ currentWord.exampleSentence1 }}</p>
    <van-button @click="fetchNewWord">下一个</van-button>
    <van-button @click="addToFavorites">收藏</van-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {get} from "../../util/request.js";

const currentWord = ref([]);

async function fetchNewWord() {
  try {
    const response = await get('home/words/recitation');
    currentWord.value = response.data;
    console.log(currentWord.value);
  } catch (error) {
    console.error('Error fetching word:', error);
  }
}
async function addToFavorites() {
  try {
    const response = await get(`home//wrong-questions/collectionWord/${currentWord.id}`);
    alert("收藏成功")
    // Optionally, you can update UI or show a message confirming the operation
  } catch (error) {
    console.error('Error adding to favorites:', error);
    // Handle error: show error message, log, etc.
  }
}

onMounted(() => {
  fetchNewWord();
});
</script>

<style scoped>
.word-container {
  text-align: center;
}
</style>